<template>
  <div class="title-view">
    <div class="name">地块分组</div>
  </div>
    <CellGroup inset style="margin:0;">
      <Field
        label="分组名称字数50个字"
        input-align="left"
        v-model="groupText"
        :maxlength="50"
        placeholder="输入分组名称"
        label-align="top"
      />
    </CellGroup>
    <div  class="btn-save">
      <Button 
        plain
        icon="plus"
        @click="btnAdd"
        style="width:90%;"
        type="success"> 添加</Button> 
    </div>

    <CellGroup inset style="margin:0;">
          <div class="select-title">选择历史分组</div>
          <Empty image-size="100" description="暂无数据" v-if="groupList.length==0" />
          <Field v-for="(item,index) in groupList"
            style="align-items: center;"
            input-align="left"
            :key="item.landGroupId"
            readonly
            label-width="1.5rem"
            :model-value="item.groupName"
            @click-input="changeItem(item)"
            :maxlength="50"
            placeholder="输入分组名称"
          >
          <template #label>
            <Checkbox  v-model="item.checked" @click="changeItem(item)" shape="square"></Checkbox>
          </template>
            <template #button>
              <Icon @click="delItem(item,index)" name="delete-o" color="#ff0000" size="1.4rem"> </Icon> 
          </template>
        </Field> 
    </CellGroup>
    <div  class="btn-save" v-if="groupList.length">
      <Button
        icon="certificate"
        style="width:90%;"
        @click="btnSave"
        type="success"> 保存</Button> 
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import { Button,Checkbox,showConfirmDialog ,Field,Icon,showNotify,Empty} from 'vant';
import { getCookie } from '@/utils/httpParamsHandler';
import {getFarmGroup,getLandDetail,delLandTGroup,eidtLand,addLandGroup} from '@/api/gis'
const emits = defineEmits(['onClick','onSuccess','change'])
const groupList:any = ref([])
const groupText:any = ref('')
const saveType:any = ref(true)
const landInfo:any = ref({})
const props = defineProps({ 
  farmLandId:{
    type:String,
    default:''
  }
})
onMounted(async ()=>{
    getLandDetail({farmLandId:props.farmLandId}).then((res:any)=>{
      if(res.success){
        landInfo.value = res.data
        getSelectList()
      }
    })
})
const getSelectList = ()=>{
  getFarmGroup({farmId:getCookie('farmId')}).then((data:any)=>{
          if(data.success){
              groupList.value = data.data?.map((item:any)=>{
                    item.checked =item.landGroupId==landInfo.value?.landGroupId
                    return item
               })||[]
            }
      })
}
const changeItem =(row:any)=>{
  groupList.value.map((item:any)=>{
    item.checked = false
    return item
  })
  row.checked = true
}

const btnAdd =async ()=>{
  if(!groupText.value){
    showNotify({type: 'warning', message: '请输入分组名称' });
    return
  }
  if(!saveType.value){
    return
  }
  saveType.value=false
  let res:any = await addLandGroup({
    farmId:getCookie('farmId'),
    groupName:groupText.value
})
  if(res.success){
    showNotify({type: 'success', message: '保存成功' });
    groupText.value=''
    getSelectList()
    window.setTimeout(() => {
      saveType.value=true
    }, 1000);
  }else{
    showNotify({type: 'danger', message: res.message});
    window.setTimeout(() => {
      saveType.value=true
    }, 1000);
  }
}
const btnSave =async ()=>{
 let obj= groupList.value.find((item:any)=>item.checked)
 if(!obj){
    showNotify({type: 'warning', message: '请选择地块分组' });
    return
  }
  let res:any = await eidtLand({
    farmId:getCookie('farmId'),
    farmLandId:props.farmLandId,
    landGroupId:obj.landGroupId,
    groupName:obj.groupName
})
  if(res.success){
    emits('change',{landGroupId:obj.landGroupId,groupName:obj.groupName})
    showNotify({type: 'success', message: '保存成功' });
    onCancel()
  }else{
    showNotify({type: 'danger', message: res.message});
  }
}

const delItem =async (item:any,index:any)=>{
  showConfirmDialog({
  title: '提示',
  message:'您确定要删除该分组',
}).then(async () => {
    let res:any = await delLandTGroup([item.landGroupId])
      if(res.success){
        groupList.value.splice(index,1)
        showNotify({type: 'success', message: '删除成功' });
      }else{
        showNotify({type: 'danger', message: res.message});
      }
  })
}

const onCancel =()=>{
  emits('onSuccess',true)
}

</script>

<style lang="scss" scoped>
.title-view{
  display: flex;
  justify-content:space-between;
  padding:5px 14px 10px 14px;
  .name,.num{
    color: #333;
    font-size:15px;
    font-weight: bold;
  }
}
.btn-save{
  margin:20px auto;
  width:100%;
  text-align: center;
}
.select-title{
  font-size:15px;
  color: #333;
  padding:10px;
}
</style>